<template>
  <div class="chapterlist">
    <el-card
      style="margin-top: 8px"
      v-for="item in chapterList"
      :key="item.id"
    >
      <!-- 标题 -->
      <el-row type="flex" justify="space-between" style="margin-bottom: 15px">
        <el-col :span="6" class="title">{{ item.name }}</el-col>
        <el-col :span="3">
          <el-checkbox v-model="item.checkall" @change="checkedAll(item)"
            >全选</el-checkbox
          >
        </el-col>
      </el-row>
      <!-- 内容 -->
      <el-row type="flex" class="chapter" justify="space-between">
        <el-col
          ref="btn"
          :span="6"
          v-for="(cap, index) in item.data"
          :key="index"
          :class="{ active: cap.checked === true}"
          @click.native="checkItem(cap)"
        >
          <div>{{ cap.cname }}</div>
          <!-- <div style="font-size: 14px">0/{{ cap.children.length }}</div> -->
        </el-col>
      </el-row>
    </el-card>

    <!-- 弹出55 -->
     <CountDialog :checkedList.sync="checkedList" @updateList="updateList"/>
  </div>
</template>

<script>
import { getChapterList } from '@/api/exercise'
import CountDialog from './countDialog.vue'

export default {
  name: '',
  components: {
    CountDialog

  },
  data () {
    return {
      chapterList: [], // 所有列表
      checkedList: [], // 选中列表
      flag: false
    }
  },
  computed: {},
  watch: {
  },
  created () {
    this.getChapterList()
  },
  mounted () {},
  methods: {
    async getChapterList () {
      const { data } = await getChapterList()
      data.map((v, i) => {
        v.data.map((value) => {
          value.checked = false
        })
      })
      this.chapterList = data
      // console.log(this.chapterList)
      // console.log(this.chapterList)
    },
    // 点击全选
    checkedAll (list) {
      list.checkall = !list.checkall
      if (list.checkall) {
        list.data.map((v) => {
          v.checked = true
        })
      } else {
        list.data.map((v) => {
          v.checked = false
        })
      }

      this.changeChecked()
    },
    // 点击小选
    checkItem (cap) {
      cap.checked = !cap.checked
      this.changeChecked()
    },

    changeChecked () {
      this.checkedList = []
      this.chapterList.map((v) => {
        const flag = v.data.find((val) => {
          return val.checked === false
        })
        if (!flag) {
          v.checkall = true
        } else {
          v.checkall = false
        }
        v.data.map(v => {
          if (v.checked) {
            this.checkedList.push(v)
          }
        })
      })
      console.log(this.checkedList)
    },
    updateList () {
      this.checkedList = []
      this.getChapterList()
    }
  }
}
</script>

<style scoped lang="less">
.chapterlist{
  margin-bottom: 130px;
  .title{
    // margin: 1em 0 0.5em 0;
    color: #000000;
    font-weight: normal;
    font-family: 'Ultra', sans-serif;
    font-size: 20px;
    line-height: 42px;
    text-transform: uppercase;
    text-shadow: 0 2px white, 0 3px #777;

  }
}
::v-deep .chapter .el-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid #ccc;
  border-radius: 10px;
  height: 60px;
  margin: 0 4px;
  line-height: 20px;
  text-align: center;
}
::v-deep .chapter .el-col:hover {
  background-color: rgb(162, 212, 253);
  color: #0172ff;
}
::v-deep .chapter .active {
  // background-color: rgb(162, 212, 253);
  border: 2px solid #0172ff;
  color: #0172ff;
}
</style>
